<template>
    <div class="global-header-container translateX">
        <header-bar :isMenuShow="isMenuShow" v-on:openCart="openCart"></header-bar>
        <header-menu :navData="navData" :isMenuShow="isMenuShow"></header-menu>
    </div>
</template>
<script>
import api from '../../http'
import HeaderBar from './HeaderBar'
import HeaderMenu from './Menu'
export default {
    data() {
        return {
            isMenuShow: false,
            navData: []
        }
    },
    components: {
        HeaderBar,
        HeaderMenu
    },
    mounted() {
        this.init()
    },
    methods: {
        openCart() {
            this.$parent.showCartSlider = true
        },
        init() {
            api.GetHeader().then(response => {
                this.navData = response.data
            })
        }
    }
}
</script>
<style>
.global-header-container {
    position: relative;
    z-index: 100;
    width: 100%;
    background: #222;
}

.logo a {
    display: block;
    height: 20px;
    width: 60px;
    margin-top: 15px;
    margin-left: 25px;
    background: url("../../assets/oakley-logo.svg") left center no-repeat;
}

.mini-cart-button {
    border-left: none!important;
    background: #F41121;
}

.mini-cart-button .count {
    font-weight: bold;
}

@media (min-width: 992px) {
    .global-header-container {
        position: fixed;
        top: 0;
        left: 0;
    }
}
</style>
